<template>
  <view class="normal-login-container">
    <search placeholder="请输入车牌号" @input="inputChange">
      <view class="flex right20 align-center" slot="right">
        <!--右侧缩略搜索-->
        <uni-icons type="tune" :color="isAllEmpty(queryParams)?'#333':'#1890FF'" @click="handleOpen" size="25"/>
        <!--新增-->
        <uni-icons type="plus-filled" color="#1890FF" size="30" @click="handleToAdd"/>
      </view>
    </search>

    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
      <view class="item-wrap" v-for="(item,index) in list" :key="index" @click="goDetail(item)">

        <view class="title-wrap lineBottom10">
          <text>{{ item.vinNo || '' }}</text>
          <text>{{ item.carNo || '' }}</text>
        </view>

        <view class="flex-row align-stretch">
          <view class="flex-col flex1">

            <view class="text-line">
              <text class="text-name">常规处置编号:</text>
              <text class="text-value">{{ item.vehicleDisposalNo|filterNull }}</text>
            </view>

            <view class="text-line">
              <text class="text-name">品牌车系车型:</text>
              <text class="text-value">
                {{ item.brandName|filterNull }}/{{ item.seriesName|filterNull }}/{{ item.modelName|filterNull }}
              </text>
            </view>

            <view class="text-line">
              <text class="text-name">车辆产权:</text>
              <text class="text-value">{{ item.propertyRightName|filterNull }}</text>
            </view>

            <view class="text-line">
              <text class="text-name">申请人:</text>
              <text class="text-value">{{ item.proposer|filterNull }}</text>
            </view>

            <view class="text-line">
              <text class="text-name">处置状态:</text>
              <text class="text-value">{{ handleLabel(disposalList, item.disposalStatus) }}</text>
            </view>

          </view>

        </view>

        <view class="btn-wrap lineTop20">
          <!-- 撤销-->
          <button size="mini" v-if="[2].includes(Number(item.disposalStatus))"
                  @click.stop="handleCancel(item)"
                  type="primary">撤销
          </button>
          <!--车辆过户-->
          <button size="mini" v-if="[9].includes(Number(item.disposalStatus))"
                  @click.stop="handleTransferOwnership(item)"
                  type="primary">车辆过户
          </button>

          <button size="mini" v-if="[12].includes(Number(item.disposalStatus))"
                  @click.stop="handleAdd(item)"
                  type="primary">处置车辆
          </button>
        </view>

      </view>
    </mescroll-body>

    <condition-search ref="refConditionSearch"
                      v-model="queryParams" @reset="reset" @confirm="confirm"/>
    <!--车辆过户-->
    <transfer ref="refTransfer" @success="success"/>
  </view>
</template>

<script>

import * as apis from '@/api/routineApplyFor'
import ConditionSearch from "./components/conditionSearch.vue";
import transfer from './components/transfer'

export default {
  name: 'list',
  dicts: ['disposal_status_type'],
  components: {ConditionSearch, transfer},
  computed: {
    handleLabel() {
      return function (arr, type) {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },

    disposalList() {
      return this.dict.type.disposal_status_type
    }
  },
  watch: {},
  data() {
    return {
      carNo: '',
      list: [],
      queryParams: {
        carNo: "",
        vinNo: "",
        brandId: "",
        seriesId: "",
        modelId: "",
        licenseNature: "",
        environmentalStandards: "",
        vehicleConditionLevel: "",
        propertyRightName: "",
        proposer: "",
        applicationStartTime: "",
        applicationEndTime: ""
      },
    };
  },
  created() {
  },
  mounted() {
  },
  onLoad() {
    uni.$on('refBackList', call => {
      this.mescroll.triggerDownScroll();
    })
  },
  methods: {
    inputChange(val) {
      this.queryParams.carNo = val;
      this.mescroll.resetUpScroll();
    },

    isAllEmpty() {

    },

    //打开搜索弹框
    handleOpen() {
      this.$refs.refConditionSearch.open();
    },

    confirm(val) {
      this.queryParams = val;
      this.mescroll.resetUpScroll();
    },

    reset() {
      this.queryParams = {
        carNo: "",
        vinNo: "",
        brandId: "",
        seriesId: "",
        modelId: "",
        licenseNature: "",
        environmentalStandards: "",
        vehicleConditionLevel: "",
        propertyRightName: "",
        proposer: "",
        applicationStartTime: "",
        applicationEndTime: ""
      }
      this.mescroll.resetUpScroll();
    },

    //新增
    handleToAdd() {
      let url = `/pages/VehiclePage/routineApplyFor/add?type=edit`;
      this.$tab.navigateTo(url);
    },

    handleAdd(val) {
      let url = `/pages/VehiclePage/routineApplyFor/add?type=edit&id=${val.vehicleDisposalId}&flowId=${val.flowId}`;
      this.$tab.navigateTo(url);
    },

    async upCallback(page) {
      var params = {
        pageNum: page.num,
        pageSize: page.size,
        ...this.queryParams,
      };
      try {
        const res = await apis?.vehicleDisposalList(params);
        //设置列表数据
        if (page.num === 1) this.list = []; //如果是第一页需手动制空列表
        res.rows.forEach((item) => {
          item.check = false;
        });
        this.list = this.list.concat(res.rows); //追加新数据
        this.mescroll.endBySize(res.rows.length, res.total);
      } catch (e) {
        //联网失败, 结束加载
        this.mescroll.endErr();
      }
    },

    //详情
    goDetail(val) {
      let url = `/pages/VehiclePage/routineApplyFor/add?id=${val.vehicleDisposalId}&flowId=${val.flowId}&type=view`;
      this.$tab.navigateTo(url);
    },

    //撤销
    handleCancel(val) {
      let url = `/pages/VehiclePage/routineApplyFor/cancel?id=${val.vehicleDisposalId}&type=edit`;
      this.$tab.navigateTo(url);
    },

    //车辆过户
    handleTransferOwnership(row) {
      this.$refs.refTransfer.open(row.vehicleDisposalId)
    },

    success(){
      this.mescroll.triggerDownScroll();
    }
  },
};
</script>

<style scoped lang=""></style>


